@use "../../react-components/styles/theme.scss";
@import 'shared';

:local(.ui) {
  @extend %default-font;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  color: white;
}

:local(.grid) {
  display: grid;
  grid-template-rows: 10vh 69vh 1fr;
  width: 100%;
  height: 100%;
  @media (min-height: theme.$breakpoint-vr) {
    grid-template-rows: 17vh 69vh 1fr;
  }
}

:local(.mainPanel) {
  margin: auto;
  width: clamp(300px, 100%, 80vw);
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

:local(.logoTagline) {
  color: theme.$text1-color;
  text-shadow: 0px 0px 10px theme.$text-inverted-color;
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 1.2em;
  margin: 30px 0;
}


:local(.logo) {
  width: clamp(200px, 100%, 17vw);
  display: block;
  filter: drop-shadow(0 0 4px theme.$text-inverted-color);

  img {
    width: 100%;
  }
  svg {
    width: clamp(200px, 100%, 17vw);
    height: clamp(200px, 100%, 17vh);
  }
}

:local(.info) {
  grid-row: 3;
  color: theme.$text1-color;
  text-shadow: 0px 0px 10px theme.$text-inverted-color;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  text-align: center;
  z-index: 0;
  @media (min-width: theme.$breakpoint-lg) {
    align-items: flex-start;
    align-self: left;
    margin-left: 16px;
    text-align: left;
  }
}

:local(.name) {
  font-weight: bold;
  font-size: 1.6em;
}

:local(.attribution) {
  font-size: 1.0em;
  white-space: normal;

  .remix {
    font-size: 0.8em;
  }

  a {
    font-size: 0.8em;
    color: theme.$text1-color;
    pointer-events: auto;
  }
}

:local(.screenshot) {
  position: absolute;
  width: 115%;
  height: 115%;
  top: -40px;
  left: -40px;

  img {
    width: 100%;
    height: 100%;
  }

  background-color: black;
  filter: blur(10px);
}

:local(.screenshotHidden) {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}

:local(.scenePreviewButtonWrapper) {
  margin: auto;
  display: flex;
  max-width: 60vw;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

:local(.scenePreviewButton) {
  @extend %action-button;
  display: flex;
  flex-direction: row;
  border: 1px solid #007AB8;
  background-color: #007AB8;
  color: theme.$text5-color;
  box-sizing: border-box;
  border-radius: 13px;
  margin: .5rem 0 .5rem 0;
  white-space: nowrap;
  svg {
    margin-right: 8px;
    color: theme.$text5-color;
  }
  &:hover {
    background-color: #008bd1;
    color: theme.$text5-color;
    svg {
      color: theme.$text5-color
    }
  }
  &:active {
    background-color: #00699E;
  }
}

:local(.unavailable) {
  color: theme.$text5-color;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


:local(.attribution) {
  & > * {
    margin-right: 8px;

    &:last-child {
      margin-right: 0;
    }
  }
}
